<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>

</head>
<body>
<h3>hello socket</h3>
<p>【userId】：<div><input id="userId" name="userId" type="text" value="10"></div>
<p>【toUserId】：<div><input id="toUserId" name="toUserId" type="text" value="20"></div>
<p>【toUserId】：<div><input id="contentText" name="contentText" type="text" value="hello websocket"></div>
<input type="button"  value="开启socket22" onclick="openSocket()"/>
<input type="button"  value="发送消息22" onclick="sendMessage()"/>
</body>
<script>


  var socket;
  function openSocket() {
    if(typeof(WebSocket) == "undefined") {
      console.log("您的浏览器不支持WebSocket");
    }else{
      console.log("您的浏览器支持WebSocket");
      //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
      var userId = document.getElementById('userId').value;
      var socketUrl="ws://127.0.0.1:7000/webSocket/"+userId;
      console.log(socketUrl);
      if(socket!=null){
        socket.close();
        socket=null;
      }
      socket = new WebSocket(socketUrl);
      //打开事件
      socket.onopen = function() {
        console.log("websocket已打开");
        //socket.send("这是来自客户端的消息" + location.href + new Date());
      };
      //获得消息事件
      socket.onmessage = function(msg) {
        var serverMsg = "收到服务端信息：" + msg.data;
        console.log(serverMsg);
        //发现消息进入    开始处理前端触发逻辑
      };
      //关闭事件
      socket.onclose = function() {
        console.log("websocket已关闭");
      };
      //发生了错误事件
      socket.onerror = function() {
        console.log("websocket发生了错误");
      }
    }
  }
  function sendMessage() {
    if(typeof(WebSocket) == "undefined") {
      console.log("您的浏览器不支持WebSocket");
    }else {
      // console.log("您的浏览器支持WebSocket");
      var toUserId = document.getElementById('toUserId').value;
      var contentText = document.getElementById('contentText').value;
      var msg = '{"toUserId":"'+toUserId+'","contentText":"'+contentText+'"}';
      console.log(msg);
      socket.send(msg);
    }
  }

</script>
</html>
